<!DOCTYPE html>
<html lang="cn" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <script src="vue.global.js"></script>
    <script src="axios.min.js"></script>
    <style>
        td {
            border: 1px solid black;
        }
    </style>
</head>
<body id="app">
书名：<input id="bookName" type="text" value="">
<button v-on:click="getBooksByName">查找</button>
<br>
<table style="border-spacing: 0">
    <tr v-for="book in bookList" style="width: 600px;">
        <td v-text="book.id"></td>
        <td v-text="book.name"></td>
        <td v-text="book.type"></td>
        <td v-text="book.author"></td>
        <td v-text="book.price"></td>
        <td v-text="book.pic"></td>
        <td v-text="book.createDate"></td>
        <td>
            <button v-on:click="deleteBook(book.id)">删除</button>
            <button v-on:click="updateBook(book.id)">修改</button>
        </td>
    </tr>
</table>
<button v-on:click="firstPage">首页</button>
<button v-on:click="prePage">上一页</button>
<button v-on:click="nextPage">下一页</button>
<button v-on:click="lastPage">末页</button>
<div>
    增加图书<br>
    名字：<input id="addName" type="text" value=""/> <br/>
    作者：<input id="addAuthor" type="text" value=""/><br/>
    类型：<input id="addType" type="text" value=""/><br/>
    价格：<input id="addPrice" type="text" value=""/><br/>
    图片：<input id="addPic" type="text" value=""/><br/>
    日期：<input id="addCreateDate" type="text" value=""/><br/>
    <button v-on:click="addBook">增加</button>
</div>
</body>


<script>
    //定义app
    const app = {
        //数据绑定
        data() {
            return {
                //图书数据
                bookList: [],
                //第几页
                page: 1,
                //每页条数
                size: 5,
                //总数
                nums: -1
            }
        },
        //事件绑定
        methods: {
            //异步请求后端所有图书数据
            getAllBooks: function () {
                axios({
                    method: "post", url: "/getAllBooks", data: {}
                }).then((response) => {
                    this.bookList = response.data
                });
            },
            //异步分页获取图书
            getBooksByPage: function () {
                console.log("分页获取数据：" + this.page + " " + this.size)
                axios({
                    method: "post", url: "/getBooksByPage", data: {
                        page: this.page,
                        size: this.size
                    }
                }).then((response) => {
                    this.bookList = response.data.bookList
                    this.nums = response.data.nums;
                });
            },
            //异步删除图书
            deleteBook: function (id) {
                axios({
                    method: "post", url: "/deleteBook", data: {id: id}
                }).then((response) => {
                    alert(response.data)
                    this.getBooksByPage()
                });
            },
            //异步增加图书
            addBook: function () {
                axios({
                    method: "post", url: "/addBook", data: {
                        name: document.getElementById("addName").value,
                        author: document.getElementById("addAuthor").value,
                        type: document.getElementById("addType").value,
                        price: document.getElementById("addPrice").value,
                        pic: document.getElementById("addPic").value,
                        createDate: document.getElementById("addCreateDate").value,
                    }
                }).then((response) => {
                    alert(response.data)
                    this.getBooksByPage()
                });
            },
            //异步按名字请求图书
            getBooksByName: function () {
                axios({
                    method: "post", url: "/getBooksByName",
                    data: {
                        name: document.getElementById("bookName").value
                    }
                }).then((response) => {
                    this.bookList = response.data
                });
            },
            //修改图书
            updateBook: function (id) {
                axios({
                    method: "post", url: "/updateBook", data: {
                        id: id,
                        name: prompt('请输入新图书名字：'),
                        author: prompt('请输入新图书作者：'),
                        type: prompt('请输入新图书类型：'),
                        price: prompt('请上传新图书价格：'),
                        pic: prompt('请上传新图书图片：'),
                        createDate: prompt('请输入新图书日期：')
                    }
                }).then((response) => {
                    if (response.data === 'ok') {
                        this.getBooksByPage()
                    } else {
                        alert(response.data)
                    }
                });
            },
            //分页获取
            firstPage: function () {
                this.page = 1
                this.getBooksByPage()
            },
            prePage: function () {
                this.page = this.page - 1
                this.getBooksByPage()
            },
            nextPage: function () {
                this.page = this.page + 1
                this.getBooksByPage()
            },
            lastPage: function () {
                this.page = parseInt(this.nums / this.size) + 1
                this.getBooksByPage()
            }
        },
        //构造方法
        mounted() {
            console.log("vue启动成功！")
            this.getAllBooks()
            //this.getBooksByPage() 启用分页功能
        }
    }
    //启动app
    Vue.createApp(app).mount("#app")
</script>
</html>